<template>
  <div class="container">
      <div class="send">
          <el-form :model="sendForm" label-width="100px">
            <el-form-item required label="班级">
                <el-select v-model="sendForm.curValue.curClassgrade" :placeholder="sendForm.classgrade[0].label">
                    <el-option
                        v-for="item in sendForm.classgrade"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                </el-select>
            </el-form-item>
            <el-form-item required label="老师">
                <el-select v-model="sendForm.curValue.curTeacher" :placeholder="sendForm.teacher[0].label">
                    <el-option
                        v-for="item in sendForm.teacher"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                </el-select>
            </el-form-item>
            <el-form-item required label="作业编号">
                <el-cascader placeholder="1" style="width: 300px" :props="sendForm.hwNumber" @change="handleChangeCate"></el-cascader>
            </el-form-item>
            <el-form-item label="反馈主题" prop="callbackTitle">
                <el-input style="width: 300px" v-model="sendForm.callbackTitle" placeholder="请输入反馈主题"></el-input>
            </el-form-item>
            <el-form-item label="内容" style="width: 70%;" prop="callbackContent">
                <el-input
                    v-model="sendForm.callbackContent"
                    :rows="5"
                    type="textarea"
                    placeholder="Please input"
                />
            </el-form-item>
            <el-form-item required label="附件" prop="files">
                <el-upload
                    :model="files"   
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :limit="3"
                >
                    <el-button type="primary">Click to upload</el-button>
                    <template #tip>
                    <div class="el-upload__tip">
                        jpg/png files with a size less than 500KB.
                    </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">立即发送</el-button>
            </el-form-item>
        </el-form>
      </div>
      <div class="receive">
      </div>
  </div>
</template>

<script>
import { reactive,toRefs} from 'vue'
export default {
    setup() {
        const dataMap = reactive({
            sendForm: {
                classgrade: [ {
                    label: "终极一班",
                    value: "class1"
                    },{
                    label: "终极二班",
                    value: "class2"
                    }
                ],
                teacher: [
                    {
                        label: "Charles",
                        value: "张三"
                    },
                    {
                        label: "Leo",
                        value: "里斯"
                    }
                ],
                curValue: {
                    defaultClassgrade: "终极一班",
                    curTeacher: "张三",
                    curHwNumber: "1",
                    curCallbackTitle: "leave",
                    curContent: "none"
                },
                hwNumber: [1,2,3],
                callbackTitle: "fight",
                callbackContent: "want to fight",
                files: ""
            }
        })
        return {
            ...toRefs(dataMap)
        }
    }
}
</script>

<style scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;

}

.send {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background-color: aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
}


.receive {
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    background-color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>